<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ config.site_title }}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
      body { background: linear-gradient(120deg, #f7f9fa 60%, #e9ecef 100%); min-height: 100vh; }
      .navbar {
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        background: #fff;
      }
      .navbar-brand { font-weight: bold; letter-spacing: 2px; color: #3b4252 !important; }
      .container { max-width: 860px; margin-top: 48px; margin-bottom: 48px; }
      .card, .accordion-item, .table { border-radius: 12px !important; }
      .btn-primary { background: #3563e9; border: none; }
      .btn-primary:hover { background: #2848b2; }
      .btn-outline-success { border-radius: 20px; }
      .list-group-item { border-radius: 12px !important; margin-bottom: 10px; transition: box-shadow 0.2s; }
      .list-group-item:hover { box-shadow: 0 2px 12px rgba(53,99,233,0.10); }
      .alert { border-radius: 12px; }
      h2, h4, h5 { color: #2d3748; }
      .form-label { color: #495057; }
      .accordion-button { font-weight: 500; }
    </style>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container-fluid justify-content-center position-relative">
        <div class="mx-auto text-center w-100">
          <a class="navbar-brand mx-auto text-center d-block" style="font-size:1.5rem;" href="/">{{ config.site_title }}</a>
        </div>
        <div class="position-absolute end-0 top-0 mt-2 me-3 d-flex align-items-center">
          {% if session.user %}
            <span class="navbar-text me-2">你好, {{ session.user.username }}</span>
            {% if session.user.role == 'admin' %}
            <div class="dropdown me-2">
              <button class="btn btn-outline-success btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                导出投票
              </button>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="/export_votes">导出CSV</a></li>
              </ul>
            </div>
            {% endif %}
            <a class="btn btn-outline-secondary btn-sm" href="/logout">退出</a>
          {% endif %}
        </div>
      </div>
    </nav>
    <div class="container">
      {% with messages = get_flashed_messages() %}
        {% if messages %}
          <div class="alert alert-info mt-3">
            {{ messages[0] }}
          </div>
        {% endif %}
      {% endwith %}
      {% block content %}{% endblock %}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>
